<template>
  <div>
    <div class="top-panel__box">
      <el-form :model="dataForm" ref="dataForm" inline size="small" onsubmit="return false">
        <el-form-item>
          <el-input placeholder="搜索反馈内容" v-model="dataForm.opinionContent" maxlength="30" clearable />
        </el-form-item>
        <el-form-item>
          <el-date-picker type="date" v-model="dataForm.createTime" style="width:200px" value-format="yyyy-MM-dd" placeholder="反馈时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="反馈人员" v-model="dataForm.createBy" maxlength="30" clearable />
        </el-form-item>
        <el-form-item>
          <el-select placeholder="状态" v-model="dataForm.currentStatus" clearable>
              <el-option v-for="(value, key) in dicts['opinion_current_status'].childMap" :key="key" :value="key" :label="value" />
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList(1)">
            <fa-icon class="fa-search" />查询</el-button>
          <reset-button :dataForm.sync="dataForm" :fixedData="{pageNum: 1, pageSize: 20}" />
        </el-form-item>
      </el-form>
    </div>
    <div class="top-panel__box">
      <el-form onsubmit="return false">
        <el-form-item>
          <el-button type="primary" @click="batchCancel">
            批量打开
          </el-button>
          <el-button type="primary" @click="batchOpen">
            批量关闭
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="table-top">
      <el-table :row-key="getRowKey" :data="dataList" v-loading="tableLoading" @select="handleSelectionChange" @select-all="selectAllEvent" tooltip-effect="light" class="tc-table" size="small" :border="true">
        <el-table-column type="selection" width="55" fixed="left"></el-table-column>
        <template v-for="(column, index) in BIZ_HEAD_LIST">
          <el-table-column :prop="column.prop" :label="column.label" :key="index" :width="column.width" :show-overflow-tooltip="true" />
        </template>
        <el-table-column prop="operation" class-name="oper-col" label="操作" :width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="editRow(scope.row)">详情</el-button>
            <el-button size="mini" type="success" plain @click="openRow(scope.row, 'OPEN')" v-if="scope.row.currentStatus !== 'OPEN'">打开</el-button>
            <el-button size="mini" type="danger" plain @click="openRow(scope.row, 'CLOSE')" v-if="scope.row.currentStatus === 'OPEN'">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="pagination-top">
        <pagination :pageNum.sync="dataForm.pageNum" :curSizes.sync="dataForm.pageSize" :total="total" @getList="getList" />
      </el-row>
    </el-row>
    <el-dialog title="详情" :visible.sync="editDialog" width="30%" :close-on-click-modal="false">
      <feed-back-details v-if="editDialog" :feedName="editData.createBy" :feedId="editData.id" @close="editDialog = false" />
    </el-dialog>
  </div>
</template>

<script>
import FeedBackDetails from './components/FeedBackDetails'
import { BIZ_TYPE, BIZ_HEAD_LIST, BIZ_FORM } from './js/contant.js'
import { CONSTANT_OBJ } from '@/utils/constant'
import { common } from '@/utils/common'
import api from './api'
import { mapState } from 'vuex'
export default {
  components: { FeedBackDetails },
  data () {
    return {
      BIZ_TYPE,
      BIZ_HEAD_LIST,
      BIZ_FORM,
      editDialog: false,
      tableLoading: false,
      isEdit: false,
      editData: {},
      dataForm: {
        opinionContent: '',
        createBy: '',
        createTime: '',
        pageNum: 0,
        pageSize: 10
      },
      dataList: [],
      total: 0,
      slectedList: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList (val) {
      this.dataForm.pageNum = val || this.dataForm.pageNum
      this.tableLoading = true
      api.queryOpinionList(this.dataForm).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          data.list.forEach(ele => {
            ele.newStatus = this.dicts['opinion_current_status'].childMap[ele.currentStatus]
          })
          this.dataList = data.list || []
          this.total = parseInt(data.total) || 0
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    // 编辑
    editRow (row) {
      this.editData = {...row}
      this.editDialog = true
    },
    // 更新状态
    openRow (row, type) {
      let title = row.currentStatus === 'OPEN' ? '是否确定关闭' : '是否确定打开'
      common.confirmFn('', title).then(res => {
        if (res) {
          api.sendOpinionStatus({id: row.id, currentStatus: type}).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    batchCancel (type) {
      let ids = this.filterData(this.slectedList)
      console.log(ids, '选择结果')
      if (ids.failIndex > 0) {
        common.confirmFn(`当前已选中反馈内容 ${this.slectedList.length} 笔，其中可开启内容 ${ids.failIndex} 笔。`, '是否确定批量打开反馈内容？').then(res => {
          if (res) {
            this.batchOperator('OPEN')
          }
        })
      } else {
        common.confirmFn(`当前选中的反馈内容无可打开反馈内容。`, '无可打开反馈内容').then(res => {
          if (res) {}
        })
      }
    },
    batchOpen () {
      let ids = this.filterData(this.slectedList)
      console.log(ids, '选择结果')
      if (ids.successIndex > 0) {
        common.confirmFn(`当前已选中反馈内容 ${this.slectedList.length} 笔，其中可关闭内容 ${ids.successIndex} 笔。`, '是否确定批量关闭反馈内容？').then(res => {
          if (res) {
            this.batchOperator('CLOSE')
          }
        })
      } else {
        common.confirmFn(`当前选中的反馈内容无可关闭反馈内容。`, '无可关闭反馈内容').then(res => {
          if (res) {}
        })
      }
    },
    batchOperator (status) {
      let params = {
        ids: [...this.slectedList.map(ele => ele.id)],
        operateStatus: status
      }
      api.batchOperator(params).then(res => {
        this.successFn(res)
        this.slectedList = []
      })
    },
    // 处理数据
    filterData (ids) {
      let checked = ids.filter(v => v.currentStatus === 'OPEN')
      let notCheck = ids.filter(v => v.currentStatus === 'CLOSE')
      console.log(checked, '可分派')
      console.log(notCheck, '不可分派')
      let successIndex = checked.length
      let failIndex = notCheck.length
      let successIds = checked.map(ele => ele.id)
      let failIds = notCheck.map(ele => ele.id)
      return {
        successIndex,
        failIndex,
        failIds,
        successIds
      }
    },
    getRowKey (row) {
      return row.id
    },
    handleSelectionChange (selection, row) {
      let temp = [...this.slectedList]
      let res = temp.filter(ele => ele.id === row.id)
      if (res.length > 0) {
        let result = temp.filter(ele => ele.id !== row.id)
        this.slectedList = [...result]
      } else {
        this.slectedList.push(row)
      }
    },
    selectAllEvent (selection) {
      this.slectedList = [...selection]
    },
    // 校验数据
    checkoutData (val) {
      let result = true
      let data = [...this.slectedList]
      if (data.length === 0) {
        this.$message({
          message: '请选择意见反馈案件',
          type: 'warning'
        })
        result = false
      }
      let allData = data.every((item) => (item.currentStatus === val))
      if (!allData) {
        this.$message({
          message: '请正确选择意见反馈案件',
          type: 'warning'
        })
        result = false
      }
      return result
    },
    successFn (res, dialog) {
      const { responseCode, responseMsg: message } = res
      if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
        this.$message({
          message,
          type: 'success'
        })
        if (dialog) {
          this[dialog] = false
        }
        this.getList(1)
      }
    },
    closeForm () {
      this.editDialog = false
    }
  },
  computed: {
    ...mapState({
      dicts: state => state.common.dicts
    })
  }
}
</script>
